<template>
  <div>
    <el-tabs v-model="activeNames" type="card"  :tab-position="'top'" @tab-click="handleClick" >
      <el-tab-pane
        v-for="(item, index) in tabsList"
        :key="index"
        :label="item.name"
        :name="String(item.component)"
        :data-id="item.component"
        lazy
      >
        <component :is="item.component" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import All from '../all.vue'
import company from '../company.vue'
import User from '../user.vue'

export default {
  name: 'SubNavTabs',
  components: { All,company,User },
  props: {
    tabsList: { type: Array, default: null },
    activeName: { type: String, default: '' },
  },
  data() {
    return {
      activeNames: ''
    }
  },
  watch: {
    'activeName': {
      immediate: true,
      handler(newVal, oldValue) {
        this.activeNames = newVal
      }
    }
  },
  methods: {
    handleClick(tab) {
      console.log(tab)
      this.activeNames = tab.name
    }
  }
}
</script>
<style scoped>
::v-deep .el-tabs__item{
  font-size: 15px;
}
::v-deep .el-tabs--card>.el-tabs__header{
  background-color: #FAFBFD;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
  border-top: 2px solid;
}
::v-deep .el-tabs__nav-wrap{
  margin-bottom: -3px;
}
</style>
